<template>
  <div class="login-box">
    <h2>欢迎登录</h2>
    <el-form ref="form" :model="form" :rules="submitRules" label-width="80px">
      <el-form-item label="用户名" prop='name'>
        <el-input v-model="form.name"  placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop='password'>
        <el-input type="password " v-model="form.password"  placeholder="请输入密码" @keyup.enter.native="onSubmit('form')"></el-input>
      </el-form-item>
      <el-button type="primary" @click="onSubmit('form')">立即登录</el-button>
    </el-form>
  </div>

</template>
<script>
  export default {
    name:"Login",
    data(){
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码不能少于6位'))
        } else {
          callback()
        }
      }
      return{
        form:{
          name:'',
          password:''
        },submitRules:{
          name:[
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password:[
            { required: true, trigger: 'blur',validator: validatePassword}
          ]
        }
      }
    },
    methods:{
      onSubmit(formName){
        this.$refs[formName].validate((valid) => {

          if (valid) {
            //信息提交到服务器
            this.$router.push("/Main")

          } else {
            this.$message.error('请检查输入的内容');
            return false;
          }
        });
      }
    }
  }
</script>
<style>
  .login-box{
    width:500px;
    height:300px;
    border:1px solid #DCDfe6;
    margin: 150px auto;
    padding: 30px 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px #DCDfe6;
  }
</style>
